<!--
 * @Author: your name
 * @Date: 2021-07-18 16:21:05
 * @LastEditTime: 2021-07-21 09:29:43
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \geek-client-mobile\src\components\geek.icon.vue
-->
<template>
  <div class="geek-icon">
    <svg class="icon" aria-hidden="true">
        <use :xlink:href="`#icon-${name}`"></use>
    </svg>
  </div>
</template>
<script>
export default {
  name: 'GeekIcon',
  props: {
    // 字体图标名字，不需要icon-
    name: {
      type: String,
      default: ''
    }
  }
}
</script>
<style scoped lang="less">
.geek-icon{
    display: inline-block;
    position: relative;
    // 控制图标大小：geek-icon 的font-size多大，字体图标就多大
    // svg的图标都会有字体的颜色，能不能设置颜色要看，图标自己有没有开放设置。
    // 如果开放颜色的设置：父元素的color来设置
    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
}
</style>
